<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/mui.min.css">
    <style>
        body{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="app" class="mui-content" style="margin-top: 10px;">
    <form class="mui-input-group">
        <div class="mui-row" style="text-align: center;">
            <img src="/img/login.png" style="width: 20%;margin-top: 5px">
        </div>
        <div class="mui-input-row">
            <label>用户名</label>
            <input v-model="form.username" type="text" class="mui-input-clear" placeholder="请输入用户名">
        </div>
        <div class="mui-input-row">
            <label>密码</label>
            <input v-model="form.password" type="password" class="mui-input-password" placeholder="请输入密码">
        </div>
        <div class="mui-button-row">
            <button @click="login" type="button" class="mui-btn mui-btn-primary" >确认</button>
            <button type="button" @click="reset" class="mui-btn mui-btn-danger" >取消</button>
            <!--<div v-on:click="reset">重置</div>--><!--测试click方法在其他标签是否生效，可以-->
        </div>
    </form>
</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/jquery/jquery-3.3.1.js"></script>
<script src="js/vue/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            form:{
                username: '',
                password: ''
            }
        },
        methods:{
            login: function () {
                var _this = this;
                $.ajax({
                    url: '/user/login',
                    data:_this.form,
                    type: 'post',
                    dataType: 'json',
                    success: function (res) {
                        if(res.code === 0){
                            window.location.href="/index";
                        }else{
                            mui.alert(res.msg, '登录失败');
                        }
                    },
                    error: function (res) {
                        console.log(res)
                    }
                });
            },
            reset: function () {
                this.form.username = '';
                this.form.password = '';
            }
        },
        mounted:function () {

        }
    });
</script>
</html>